<template>
  <div class="bg">
    <!-- 顶部标题 -->
    <div class="top">
      <p class="top-text">代付订单</p>
    </div>
    <!-- 搜索栏 -->
    <div class="search">
      <div class="interval">
        <el-input v-model="inputs" placeholder="请输入商户订单号"></el-input>
      </div>
      <div class="interval">
        <el-select v-model="selects" clearable placeholder="请选择订单状态">
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="block interval">
        <el-date-picker
          v-model="pickers"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
      </div>
      <div>
        <el-input v-model="input2" placeholder="请输入收款人"></el-input>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" @click="search()"
          >搜索</el-button
        >
      </div>
      <div class="search-button">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogVisibles = true"
          >新增</el-button
        >
      </div>
      <div class="search-button">
        <el-button
          type="primary"
          icon="el-icon-folder-opened"
          @click="export1()"
          >导出Excel表</el-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="table-title">
        <div class="table-title-input1">
          <el-input placeholder="暂无" v-model="money.a" disabled>
            <template slot="prepend">商户余额</template>
          </el-input>
        </div>
        <div class="table-title-input1">
          <el-input placeholder="暂无" v-model="money.b" disabled>
            <template slot="prepend">交易笔数</template>
          </el-input>
        </div>
        <div class="table-title-input1">
          <el-input placeholder="暂无" v-model="money.c" disabled>
            <template slot="prepend">交易金额</template>
          </el-input>
        </div>
        <div class="table-title-input1">
          <el-input placeholder="暂无" v-model="money.d" disabled>
            <template slot="prepend">手续费</template>
          </el-input>
        </div>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ border: '0.5px solid #e6e6e6' }"
        :header-cell-style="header"
      >
        <el-table-column
          type="selection"
          width="39"
          align="center"
        ></el-table-column>
        <el-table-column label="商户订单号" width="250" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.order_number }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userAccount.bankcard.bankCardNo"
          label="银行卡号"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="userAccount.bankcard.cardholderName"
          label="收款人姓名"
          width="110"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="alternations_amount"
          label="实付金额"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="手续费"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column label="扣除金额" width="160" align="center">
          <template slot-scope="scope">
            <span>
              {{ scope.row.alternations_amount + scope.row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="代付状态" width="160" align="center">
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.userAccount.state == '1'
                  ? 'state-color3'
                  : scope.row.userAccount.state == '2'
                  ? 'state-color4'
                  : 'state-color5',
              ]"
            >
              {{
                scope.row.userAccount.state == "1"
                  ? "已审核"
                  : scope.row.userAccount.state == "2"
                  ? "已代付"
                  : "已拒绝"
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="120" align="center">
          <template slot-scope="scope">
            <span> {{ $timer(scope.row.creat_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代付时间" width="160" align="center">
          <template slot-scope="scope">
            <span> {{ $timer(scope.row.sysAudit.audit_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="105" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row), (dialogVisible = true)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>

    <!-- 查看弹窗 -->
    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="50%">
      <div class="see">
        <div class="top">
          <p class="top-text">单位(元)</p>
        </div>
        <el-input
          placeholder="暂无数据"
          readonly
          v-model="tableDatas.a"
          class="srarch-top"
        >
          <template slot="prepend">商户订单号:</template>
        </el-input>
         <el-input
          placeholder="暂无数据"
          readonly
          v-model="tableDatas.b"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;银行卡号:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          readonly
          v-model="tableDatas.c"
          class="srarch-top"
        >
          <template slot="prepend">收款人姓名:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatas.d"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;实付金额:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatas.e"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;&emsp;手续费:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatas.f"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;扣除金额:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatas.g"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;代付状态:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          readonly
          v-model="tableDatas.o"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;创建时间:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          readonly
          v-model="tableDatas.p"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;代付时间:</template>
        </el-input>
      </div>
    </el-dialog>

    <!-- 新增弹窗 -->
    <el-dialog title="新增订单" :visible.sync="dialogVisibles" width="30%">
      <div>
        <div class="top">
          <p class="top-text">单位(元)</p>
        </div>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatass.money"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;代付金额:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatass.cardholderName"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;银行卡号:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatass.creatTime"
          class="srarch-top"
        >
          <template slot="prepend">&emsp;银行名称:</template>
        </el-input>
        <el-input
          placeholder="暂无数据"
          v-model="tableDatass.creatname"
          class="srarch-top"
        >
          <template slot="prepend">持卡人姓名:</template>
        </el-input>
      </div>
      <div class="addButton">
        <el-button type="success" @click="addOrder(), (dialogVisibles = false)"
          >确认</el-button
        >
        <el-button type="primary" @click="dialogVisibles = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDatas: {},
      tableDatass: {
        money: "",
        cardholderName: "",
        creatTime: "",
        creatname: "",
      },
      count:0,
      excl: [],
      money: {
        a: "",
        b: "",
        c: "",
        d: "",
      },
      inputs: "",
      selects: "",
      limit: 10,
      page: 1,
      pickers: "",
      input2: "",
      option: [
        {
          value: "1",
          label: "已审核",
        },
        {
          value: "2",
          label: "已代付",
        },
        {
          value: "3",
          label: "已拒绝",
        },
      ],
      dialogVisible: false,
      dialogVisibles: false,
      currentPage1: 1,
      vall:'',
    };
  },
  methods: {
    // 导出Excel表
    export1() {
      this.$axios({
        url: "/system/user/pmm/paymentorder/exportExcel",
        method: "GET",
        params: {
          order_number: this.excl,
        },
      })
        .then((res) => {
          this.excl = []
          console.log("Excel", res);
        })
        .catch((err) => {
          console.log("Excel", err);
        });
    },
    // 查看弹窗事件
    handleDelete(row) {
      console.log(row);
      this.tableDatas.a = row.order_number;
      this.tableDatas.b = row.userAccount.bankcard.bankCardNo;
      this.tableDatas.c = row.userAccount.bankcard.cardholderName;
      this.tableDatas.d = row.alternations_amount;
      this.tableDatas.e = row.amount;
      this.tableDatas.f = row.alternations_amount + row.amount;
      this.tableDatas.g = row.userAccount.state == "1" ? "已审核" : row.userAccount.state == "2" ? "已代付" : "已拒绝";  
      this.tableDatas.o = this.$timer(row.creat_time);
      this.tableDatas.p = this.$timer(row.sysAudit.audit_time);
    },
    // 新增订单
    addOrder() {
      this.$axios({
        url: "/system/user/pmm/paymentorder/addMerchantPaymentOrder",
        method: "GET",
        params: {
          alternations_amount: this.tableDatass.money,
          bankCardNo: this.tableDatass.cardholderName,
          bankName: this.tableDatass.creatTime,
          cardholderName: this.tableDatass.creatname,
        },
      })
        .then((res) => {
          console.log(res);
          this.$message({
            message: "新增成功",
            type: "success",
          });
        })
        .catch((err) => {
          console.log("新增", err);
        });
    },
    // 搜索
    search() {
      this.$axios({
        url: "/system/user/pmm/paymentorder/MerchantDaFuFindbyCondition",
        method: "GET",
        params: {
          cardholder_name: this.input2,
          end_time: this.pickers[0],
          limits: this.limit,
          order_number: this.inputs,
          page: this.page,
          start_time: this.pickers[0],
          state: this.selects,
        },
      })
        .then((res) => {
          console.log("搜索", res);
          this.$message({
            message: "搜索成功",
            type: "success",
          });
          this.excl = []
          this.tableData = res.data.data;
          for (let i = 0; i < this.tableData.length; i++) {
          this.excl.push(res.data.data[i].order_number);
          console.log(this.excl);
        }
        })
        .catch((err) => {
          console.log("搜索", err);
        });
    },
    // 分页
    handleSizeChange(val) {
      this.vall = val 
        this.$axios({
      url: "/system/user/pmm/paymentorder/MerchantDaFuFindbyCondition",
      method: "GET",
      params: {
        limits: this.vall,
        page: this.page,
      },
    })
      .then((res) => {
         this.excl = []
        this.tableData = res.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.excl.push(res.data.data[i].order_number);
          console.log(this.excl);
        }
      })
      .catch((err) => {
        console.log("页面", err);
      });
    },
    handleCurrentChange(val) {
       this.$axios({
      url: "/system/user/pmm/paymentorder/MerchantDaFuFindbyCondition",
      method: "GET",
      params: {
        limits: this.vall,
        page: val,
      },
    })
      .then((res) => {
        this.excl = []
        this.tableData = res.data.data;
        for (let i = 0; i < this.tableData.length; i++) {
          this.excl.push(res.data.data[i].order_number);
          console.log(this.excl);
        }
      })
      .catch((err) => {
        console.log("页面", err);
      });
    },
    // 修改表头样式
    header() {
      return {
        background: "rgba(242,242,242)",
        border: "0.5px solid #e6e6e6",
      };
    },
  },
  mounted() {
    // 渲染页面
    this.$axios({
      url: "/system/user/pmm/paymentorder/MerchantDaFuFindbyCondition",
      method: "GET",
      params: {
        limits: this.limit,
        page: this.page,
      },
    })
      .then((res) => {
        this.tableData = res.data.data;
        this.count = res.data.count
        this.excl = []
        for (let i = 0; i < this.tableData.length; i++) {
          this.excl.push(res.data.data[i].order_number);
          console.log(this.excl);
        }
      })
      .catch((err) => {
        console.log("页面", err);
      });

    // 商户余额
    this.$axios({
      url: "/system/user/pmm/paymentorder/selMerchantBalance",
      method: "GET",
    })
      .then((response) => {
        this.money.a = response.data.data + " (元)";
      })
      .catch((error) => {
        console.log("余额", error);
      });

    // 交易笔数
    this.$axios({
      url: "/system/user/pmm/paymentorder/selNumberOfTransactionse",
      method: "GET",
    })
      .then((response) => {
        this.money.b = response.data.data + " (笔)";
      })
      .catch((error) => {
        console.log("交易笔数", error);
      });

    // 交易金额
    this.$axios({
      url: "/system/user/pmm/paymentorder/selTransactionAmount",
      method: "GET",
    })
      .then((response) => {
        this.money.c = response.data.data + " (元)";
      })
      .catch((error) => {
        console.log("交易记录", error);
      });

    // 手续费
    this.$axios({
      url: "/system/user/pmm/paymentorder/selMerchantServiceCharge",
      method: "GET",
    })
      .then((response) => {
        this.money.d = response.data.data + " (元)";
      })
      .catch((error) => {
        console.log("手续费", error);
      });
  },
};
</script>

<style lang="scss" scoped>
template {
  padding: 15px;
}
.bg {
  background: white;
}
.interval {
  margin: 0 15px 0 0;
}
// 顶部标题
.top {
  padding: 15px 0;
  border-bottom: 2px solid #f6f6f6;
}
.top-text {
  font-size: 14px;
  padding: 0 15px;
}
// 搜索栏
.search {
  padding: 20px 7.5px;
  display: flex;
}
.search-button {
  padding-left: 15px;
}

// 表格
.table-title {
  display: flex;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  background: rgba(242, 242, 242);

  .table-title-input1 {
    margin: 5px 5px;
    width: 400px;
  }
}
.table {
  margin: 20px 7.5px;
}
.state-color1 {
  background-color: red;
}
.state-color2 {
  color: white;
  background-color: rgb(0, 89, 255);
}
.state-color3 {
  color: rgb(248, 10, 197);
  background-color: greenyellow;
}
.state-color4 {
  color: white;
  background-color: rgb(255, 145, 0);
}
.state-color5 {
  color: white;
  background-color: rgb(255, 0, 106);
}

// 查看弹窗
.srarch-top {
  margin: 10px 0 0 10px;
  width: 450px;
}

// 新增弹窗
.addButton {
  padding: 15px;
  display: flex;
  justify-content: center;

  .el-button {
    margin: 0 30px;
  }
}

// 分页
.footer {
  padding: 0 7.5px 50px 7.5px;
}
</style>